import React from 'react';
import { Descriptions, Tooltip } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from 'umi';
import { getFileSuffix } from '@/utils/utils';
import moment from 'moment';
import { TIMEFORMAT } from '@/utils/const';
import AImage from '@apulis/image';

import styles from '../index.less';

export type ImgInfoType = {
  name?: string;
  createdAt?: number;
  size?: number;
  imgUrl?: string;
} & {}

interface Props {
  imgInfo: ImgInfoType;
  onFileIndexChange: (type: 'prev' | 'next') => void;
  prev: boolean;
  next: boolean;
}

const ImageViewer: React.FC<Props> = props => {
  const { formatMessage: f } = useIntl();
  const { imgInfo, onFileIndexChange, prev, next } = props;

  return (
    <div className={styles.fileInfoBox}>
      <Descriptions title={f({ id: 'dataSet.detail.files.image.title' })} bordered>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.name' })} span={2}>
          {imgInfo?.name}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.format' })}>
          {getFileSuffix(imgInfo?.name)}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.createdAt' })} span={2}>
          {imgInfo?.createdAt ? moment(imgInfo?.createdAt).format(TIMEFORMAT) : '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.size' })}>
          {((imgInfo?.size || 0) / 1024).toFixed(2)}kb
        </Descriptions.Item>
      </Descriptions>
      <div className={styles.imgBox}>
        <Tooltip title={prev ? f({ id: 'global.img.prev' }) : f({ id: 'dataSet.detail.files.image.prev.tips' })}>
          <LeftOutlined
            className={`${styles.icon} ${styles.prev} ${!prev && styles.disabled}`}
            onClick={() => {
              prev && onFileIndexChange('prev');
            }}
          />
        </Tooltip>
        <AImage imgInfo={{ url: imgInfo?.imgUrl || '' }} />
        <Tooltip title={next ? f({ id: 'global.img.next' }) : f({ id: 'dataSet.detail.files.image.next.tips' })}>
          <RightOutlined
            className={`${styles.icon} ${styles.next} ${!next && styles.disabled}`}
            onClick={() => {
              next && onFileIndexChange('next');
            }}
          />
        </Tooltip>
      </div>
    </div>
  )
}

export default ImageViewer;